<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
    <h1>仅支持input、select、textarea</h1>

    <input type="text" >
</div>
<script>
// Object.defineProperty
// 监控指定对象属性
// 默认get和set都不会触发
// 当修改这个属性  触发 set方法
// 当获取这个属性 触发 get方法


// 定义模型
let data = {
    msg: '神龙教主'
}

// 监控模型数据变化
let temp;
Object.defineProperty(data, 'msg', {
    get() {
        return temp
    },
    set(newData) {
        console.log("哈哈，你触发我了")
        // M-V
        temp = newData
        document.querySelector('input').value = temp
    }
})

data.msg ='神龙教母'


// V-M
// document.querySelector('input').onkeyup = e => {
//     data.msg = e.target.value
// }
document.querySelector('input').onkeyup = e => data.msg = e.target.value
</script>
</body>
</html>